<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
    <meta name="author" content="Coderthemes">

    <link rel="shortcut icon" href="/static/assets/images/favicon_1.ico">

    <title>卡友汇后台</title>
    
	<!-- jQuery  -->
	<script src="/static/plugins/jquery-3/jquery.min.js"></script>
	
	<!-- layui  -->
	<link rel="stylesheet" href="/static/assets2/css/font.css">
	<link rel="stylesheet" href="/static/assets2/css/xadmin.css">
	<!-- <link rel="stylesheet" href="./css/theme5.css"> -->
	<script src="/static/plugins/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="/static/assets2/js/xadmin.js"></script>
	
	<!-- font -->
	<link href="/static/plugins/bootstrap-fileinput/font/v5.5/all.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-4/extensions/popper.min.js"></script>

    <!--bootstrap-->
    <link href="/static/plugins/bootstrap-4/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-4/js/bootstrap.min.js"></script>
  
    <!--bootstrap-table-->
    <link href="/static/plugins/bootstrap-table-4/bootstrap-table.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-table-4/bootstrap-table.js"></script>
	<script src="/static/plugins/bootstrap-table-4/locale/bootstrap-table-zh-CN.min.js"></script>

	<!--bootstrap-editable-->
    <link href="/static/plugins/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/x-editable/dist//bootstrap3-editable/js/bootstrap-editable.min.js"></script>
	<script src="/static/plugins/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
	
    <!--bootstrap-table-sticky-header-->
    <link href="/static/plugins/bootstrap-table-4/extensions/sticky-header/bootstrap-table-sticky-header.min.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-table-4/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>
	
    <!--bootstrap-table-export-->
	<script src="/static/plugins/tableExport/tableExport.min.js"></script>
	<script src="/static/plugins/tableExport/FileSaver.min.js"></script>
	<script src="/static/plugins/tableExport/xlsx.core.min.js"></script>
	<script src="/static/plugins/tableExport/jspdf.min.js"></script>
	<script src="/static/plugins/tableExport/jspdf.plugin.autotable.js"></script>
	<script src="/static/plugins/bootstrap-table-4/extensions/export/bootstrap-table-export.min.js"></script>

	<!-- kindeditor -->
	<script type="text/javascript" src="/static/plugins/kindeditor/kindeditor-all.js"></script>
	<script type="text/javascript" src="/static/plugins/kindeditor/lang/zh-CN.js"></script>
    
    <!-- jquery icheck-->
    <link href="/static/plugins/icheck/skins/all.css" rel="stylesheet" type="text/css">
    <link href="/static/plugins/icheck/skins/square/blue.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/icheck/js/icheck.min.js"></script>
	
	<!-- qiniu -->
	<script src="/static/assets/qiniu/plupload.full.min.js"></script>
	<script src="/static/assets/qiniu/qiniu.min.js"></script>
	<script src="/static/assets/qiniu/uploadWithSDK.js"></script>

	<!--bootstrap-fileinput-->
    <link href="/static/plugins/bootstrap-fileinput/css/fileinput.css" rel="stylesheet" type="text/css"/>
    <link href="/static/plugins/bootstrap-fileinput/themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="/static/plugins/bootstrap-fileinput/font/v5.5/all.css" crossorigin="anonymous" rel="stylesheet">
	<script src="/static/plugins/bootstrap-fileinput/js/plugins/piexif.js" type="text/javascript"></script>
	<script src="/static/plugins/bootstrap-fileinput/js/plugins/sortable.js" type="text/javascript"></script>
	<script src="/static/plugins/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
	<script src="/static/plugins/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>
	
    <!--bootstrap-validator-->
    <link href="/static/plugins/bootstrap-validator/bootstrap-validator.min.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-validator/bootstrap-validator.min.js"></script>
	
	<!-- sweet alert  -->
    <link href="/static/plugins/sweetalert/sweetalert.css" rel="stylesheet" type="text/css">
	<!-- <script src="/static/plugins/sweetalert/sweetalert.min.js"></script> -->
	<script src="/static/plugins/sweetalert/sweetalert.min.js"></script>
	
	<!--bootstrap-treeview-->
    <link href="/static/plugins/bootstrap-treeview/css/bootstrap-treeview.min.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-treeview/js/bootstrap-treeview.min.js"></script>
	
	<!--bootstrap-switch-->
    <link href="/static/plugins/bootstrap-switch/bootstrap-switch.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-switch/bootstrap-switch.js"></script>
	
    <!--bootstrap-datetimepicker-->
	<script src="/static/plugins/moment/moment.js"></script>
    <link href="/static/plugins/bootstrap-datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bootstrap-datepicker/js/bootstrap-datetimepicker.min.js"></script>
	<script src="/static/plugins/bootstrap-datepicker/js/bootstrap-datetimepicker.zh-CN.js"></script>

	<!-- bo -->
    <link href="/static/plugins/bo/bo.css" rel="stylesheet" type="text/css">
	<script src="/static/plugins/bo/bo.js"></script>

</head>


<body>


<div class="container-fluid" th:id="'id_container_' + ${menu.menuId}">

	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-body">
					<form class="form-inline m-b-5 form-search" role="form">
						<!-- inputs search -->
						[(${inputsSearch})]
						
						<!-- 统计按钮 -->
						[(${buttonCount})]
					
						<div class="btn-group">
							<button type="button" class="btn btn-primary btn-search"><i class="fa">&#xf002;</i>搜索</button>
							<button type="button" class="btn btn-danger btn-clearing"><i class="fa">&#xf00d;</i>清空</button>
							<button type="button" class="btn btn-info" onclick="location.reload();"><i class="fa">&#xf021;</i>刷新</button>
						</div>
						<div style="width:100%;text-align: right;">
							<div class="btn-group">
								<button type="button" th:class="'btn btn-primary ' + ${button.buttonAttr}" th:each="button : ${listButton}">[[${button.buttonName}]]</button>
							</div>
						</div>
					</form>
					<div id="toolbar">
					</div>
					<table class="bo-table text-nowrap table-layout:fixed" id="xxx_table" 
						  data-width='100%'
						  data-locale='zh-CN'
						  data-toolbar="#toolbar">
  					</table>
				</div>
			</div>
		</div>
	</div>
	<!-- End Row -->
	
	<!-- modal url -->
	<div class="modal fade modal-page-url" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
		<div class="modal-dialog modal-xl">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				
				<div class="modal-body">
					<div class="modal-body form-horizontal">
						<iframe id="id_iframe_page" width="100%" height="800px"></iframe>
					</div>
				</div>
				
				<div class="modal-footer">
					<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- container -->
<script>
	
	function showPageUrl(url) {
		$('.modal-page-url').modal("show")
		document.getElementById("id_iframe_page").src = url;
	}
	
	function hidePageUrl() {
		$('.modal-page-url').modal("hide")
	}
	
	function clearSelectorModal(objId, text) {
		$('#' + objId).val('');
		$('#' + objId).next().val(text);
	}

	function detailFormatter(index, row) {
	  var html = []
	  $.each(row, function (key, value) {
	    html.push('<p><b>' + key + ':</b> ' + value + '</p>')
	  })
	  return html.join('')
	}
	
	function refresh() {
		obj_.table.table.bootstrapTable("refresh");
	}

	var obj_ = new BOList();
	obj_.container = $('#id_container_[[${menu.menuId}]]');
	obj_.table = new BOList();
	obj_.formSearch = obj_.container.find('.form-search');
	$(function () {
    	
		obj_.table.param = {
				[(${jsParamsInit})]
			};
		
		obj_.table.columns = [(${columns})];
		
		obj_.table.table = $BO.initTable(obj_.container.find('.bo-table'), "/api/inter/[[${menu.menuTable}]]/search", obj_.table.param, obj_.table.columns, null, window.parent.document.body.clientHeight - 200, "/api/inter/[[${menu.menuTable}]]/edit", "[[${menu.menuPkName}]]");
		
        // 搜索按钮
        obj_.formSearch.find('.btn-search').click(function(){
        	obj_.formSearch.find('input[type=text],select,input[type=checkbox],input[type=hidden]').each(function() {
        		obj_.table.param[$(this).attr('name')] = $(this).val();
			});
			obj_.table.table.bootstrapTable("refreshOptions", {pageNumber: 1});
		});

        // 清空按钮
        obj_.formSearch.find('.btn-clearing').click(function(){
        	obj_.formSearch.find('input[type=text],select').each(function() {
				$(this).val('');
        		obj_.table.param[$(this).attr('name')] = '';
			});
			obj_.table.table.bootstrapTable("refreshOptions", {pageNumber: 1});
		});

        // 添加按钮
        var layer = layui.layer;
		$('.btn-add').click(function(){
			var w=($(window).width()*0.9);
			var h=($(window).height() - 50);
			var url = '/add?menuId=' + [[${menu.menuId}]];
		    var index = layer.open({
		        type: 2,
		        area: [w+'px', h +'px'],
		        fix: true, //不固定
		        maxmin: false,
		        shadeClose: true,
		        shade:0.4,
		        title: "新增",
		        content: url
		    });
		});

        // 编辑按钮
		$('.btn-edit').click(function(){

	    	var rows = obj_.table.table.bootstrapTable('getSelections');
	    	if (!rows || rows == null) {
				alert("请选择一条数据进行操作");
				return;
			} else if (rows.length != 1) {
				alert("只能选择一条数据");
				return;
			}
	    	var row = rows[0];
	    	if (!row || row == null) {
				alert("请选择一条数据");
				return;
			}
	    	
			var w=($(window).width()*0.9);
			var h=($(window).height() - 50);
			var url = '/edit?menuId=' + [[${menu.menuId}]] + '&valId=' + row['[[${menu.menuPkName}]]'];
		    var index = layer.open({
		        type: 2,
		        area: [w+'px', h +'px'],
		        fix: true, //不固定
		        maxmin: false,
		        shadeClose: true,
		        shade:0.4,
		        title: "编辑",
		        content: url
		    });
		});

		 // 导入
		 $('.btn-import-excel').click(function(){
			
			var w=($(window).width()*0.9);
			var h=($(window).height() - 50);
			var url = '/importExcel?menuId=' + [[${menu.menuId}]];
			var index = layer.open({
			       type: 2,
			       area: [w+'px', h +'px'],
			       fix: true, //不固定
			       maxmin: false,
			       shadeClose: true,
			       shade:0.4,
			       title: "导入",
			       content: url
			});
		});

        // 假删除按钮
        bindClickCommitAjax(
       		obj_.formSearch.find('.btn-delete-false'),
       		obj_.table.table,
       		"确定删除",
       		"若删除该数据将无法显示",
       		"/api/inter/[[${menu.menuTable}]]/deleteFalse",
       		[{fieldName : '[[${menu.menuPkName}]]'}]
       	);

        // 真删除按钮
        bindClickCommitAjax(
       		obj_.formSearch.find('.btn-delete-true'),
       		obj_.table.table,
       		"确定删除",
       		"若删除该数据将无法显示",
       		"/api/inter/[[${menu.menuTable}]]/deleteTrue",
       		[{fieldName : '[[${menu.menuPkName}]]'}]
     	);
        
        // 自定义按钮脚本
        [(${buttonScripts})]
	});
</script>

<div th:if="${button.buttonDiy} ne ''" th:each="button : ${listButton}">
	<div th:if="${button.buttonDiy} ne ''" data-th-include="${button.buttonDiy}"></div>
</div>

<div th:if="${menu.menuDiy} ne ''">
	<div data-th-include="${menu.menuDiy}"></div>
</div>

</body>
</html>